<!--
 * @Author: liangkun 2669681641@qq.com
 * @Date: 2023-08-22 11:28:13
 * @LastEditors: liangkun 2669681641@qq.com
 * @LastEditTime: 2023-09-11 08:34:16
 * @FilePath: \radiation-hygiene-fe\src\views\system\ukey\index.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
  <div class="app-container">
    <el-form
      class="searchform"
      @submit.native.prevent
      :model="queryParams"
      ref="queryParams"
      size="small"
      label-width="100px"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="用户名字">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getList()"
            />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label-width="20px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-wrapper">
      <div class="tableoperation">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          plain
          @click="openUkeyDialog()"
          >新增</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          plain
          @click="openResetUkeyDialog()"
          >初始化ukey</el-button
        >
      </div>

      <el-table
        v-loading="loading"
        :height="height - 400 + 'px'"
        :data="dataList"
      >
        <el-table-column label="用户名" align="center" prop="userName" />
        <el-table-column label="锁id" align="center" prop="ukeyId" />
        <el-table-column label="锁的版本" align="center" prop="version" />
        <el-table-column label="拓展版本" align="center" prop="expandVersion" />
        <el-table-column label="启动URl" align="center" prop="startUrl" />
        <el-table-column label="状态" align="center" prop="startUrl">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.state"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(row)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.type != 0"
              @click.native.prevent="openUkeyDialog(row)"
              type="text"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="handleDelete(row)"
              type="text"
              style="color: #f32d2d"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 绑定ukey -->
    <bind-user ref="bindUserRefs" @handleAddUkey="handleAddUkey" />

    <!-- 初始化 -->
    <reset-ukey ref="resetUkeyRefs" @handleReset="handleReset" />
  </div>
</template>

<script>
import {
  ukeyList,
  getUkeyInfo,
  operateState,
  removeUkey,
} from "@/api/system/ukey";
import BindUser from "./components/bindUser.vue";
import ResetUkey from "./components/resetUkey.vue";

export default {
  name: "User",
  dicts: ["seal_shape", "seal_type"],
  components: {
    BindUser,
    ResetUkey,
  },
  data() {
    return {
      loading: false,
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "印章名称不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "印章类型不能为空", trigger: "blur" },
        ],
        surround: [
          { required: true, message: "印章环绕文字不能为空", trigger: "blur" },
        ],
        shape: [
          { required: true, message: "印章形状不能为空", trigger: "blur" },
        ],
        subheading: [
          { required: true, message: "副文不能为空", trigger: "blur" },
        ],
        security: [
          { required: true, message: "防伪文字不能为空", trigger: "blur" },
        ],
        // ossId: [
        //   { required: true, message: "签章不能为空", trigger: "blur" },
        // ],
      },
      // 视图高度
      height: document.documentElement.clientHeight,
      // 列表
      dataList: [],
      total: 0,
      dialogVisible: false,
      status: "",
      title: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取印章列表
    getList() {
      this.loading = true;
      ukeyList(this.queryParams)
        .then((response) => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch((response) => {
          this.loading = false;
        });
    },
    // 打开对话框
    openUkeyDialog(row = {}) {
      let data = {
        ...row,
        userId: row.userId,
        firingView: row.firingView,
        companyName: row.companyName,
      };
      this.$refs["bindUserRefs"].openDialog(data);
    },
    // 初始
    openResetUkeyDialog() {
      this.$refs["resetUkeyRefs"].openDialog();
    },
    // 查询重置
    reset() {
      (this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }),
        this.resetForm("queryParams");
      this.getList();
    },
    // 添加/修改回调成功
    handleAddUkey() {
      this.getList();
    },
    handleReset() {},
    // 删除
    handleDelete(row) {
      this.$modal.confirm(`是否删除用户${row.userName}的ukey`).then(() => {
        removeUkey(row.id).then((res) => {
          if (res.code == "200") {
            this.$message.success("删除成功");
            this.getList();
          } else {
            this.$message.warning(res.msg);
          }
        });
      });
    },
    handleStatusChange(row) {
      let text = row.state == "0" ? "启用" : "停用";
      this.$modal
        .confirm("确认要" + text + '用户"' + row.userName + '"ukey吗？')
        .then(function () {
          return operateState(row.id, row.state);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.state = row.state == "0" ? "1" : "0";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .addDialog {
  .el-form {
    margin-left: -30px;
  }
}
::v-deep .star .el-form-item__label::before {
  content: "* ";
  color: red;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  // border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 3px;

  // border: 1px solid #999 !important;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
